<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="牛马时钟设置页面 - 配置你的工资计算参数">
    <meta name="keywords" content="工资设置,薪资配置,牛马时钟设置">
    <meta name="author" content="Cow Horse Clock">
    <title>设置 - 牛马时钟</title>
    <link rel="stylesheet" href="../styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header class="app-header" role="banner">
            <h1>设置</h1>
            <p class="subtitle">配置你的工资计算参数</p>
        </header>
        
        <main class="main-content" role="main">
            <section class="settings-section" aria-label="工资设置">
                <form class="settings-form" id="settingsForm" novalidate>
                    <div class="form-group">
                        <label for="payDate">
                            <span class="label-icon">📅</span>
                            发薪日
                        </label>
                        <input 
                            type="number" 
                            id="payDate" 
                            name="payDate"
                            min="1" 
                            max="31" 
                            value="1"
                            required
                            aria-describedby="payDateHelp"
                        >
                        <small id="payDateHelp" class="help-text">请输入1-31之间的数字</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="monthlySalary">
                            <span class="label-icon">💰</span>
                            月薪 (元)
                        </label>
                        <input 
                            type="number" 
                            id="monthlySalary" 
                            name="monthlySalary"
                            min="0" 
                            step="0.01" 
                            value="0.00"
                            required
                            aria-describedby="monthlySalaryHelp"
                        >
                        <small id="monthlySalaryHelp" class="help-text">请输入每月的工资金额（税前）</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="yearlyBonus">
                            <span class="label-icon">🎁</span>
                            年终奖 (元)
                        </label>
                        <input 
                            type="number" 
                            id="yearlyBonus" 
                            name="yearlyBonus"
                            min="0" 
                            step="0.01" 
                            value="0.00"
                            aria-describedby="yearlyBonusHelp"
                        >
                        <small id="yearlyBonusHelp" class="help-text">请输入年终奖金额（可选）</small>
                    </div>
                    
                    <div class="form-group checkbox-group">
                        <label class="checkbox-container" for="includeWeekends">
                            <span>
                                <span class="label-icon">🗓️</span>
                                是否计算周末
                            </span>
                            <input type="checkbox" id="includeWeekends" name="includeWeekends">
                            <span class="checkmark" role="checkbox" aria-checked="false"></span>
                        </label>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="save-button" id="saveSettings" aria-label="保存设置">
                            <span class="icon">💾</span>
                            保存设置
                        </button>
                    </div>
                </form>
            </section>
            
            <section class="info-section" aria-label="计算说明">
                <h3>计算说明</h3>
                <ul>
                    <li>本月上班时间：从上一个发薪日的第二天开始到这个发薪日结束</li>
                    <li>如需计算周末，则剔除周末</li>
                    <li>不计算假期</li>
                    <li>不考虑加班费，上班时间为8:00-18:00</li>
                </ul>
                
                <div class="quick-tips">
                    <h4>💡 小贴士</h4>
                    <p>设置完成后，系统会自动计算并显示你的工资信息。你可以随时返回设置页面修改参数。</p>
                </div>
            </section>
            
            <section class="advanced-settings" aria-label="高级设置">
                <h3>高级设置</h3>
                <div class="reset-section">
                    <button class="reset-button" id="resetSettings" aria-label="重置设置">
                        <span class="icon">🔄</span>
                        重置为默认设置
                    </button>
                </div>
            </section>
        </main>
        
        <nav class="tab-bar" role="navigation" aria-label="主导航">
            <button class="tab-button" id="home-tab">
                <span class="icon">🏠</span>
                首页
            </button>
            <button class="tab-button active" id="settings-tab" aria-current="page">
                <span class="icon">⚙️</span>
                设置
            </button>
        </nav>
    </div>
    
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-spinner"></div>
        <p>正在保存...</p>
    </div>
    
    <script src="../../js/common.js"></script>
    <script src="js/settings.js"></script>
</body>
</html>